<template>
  <div class="container">
    <div class="search">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="100px"
        class="demo-ruleForm"
        :inline="true"
      >
        <div class="out_box">
          <div class="form_box_list">
            <div class="form_box">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="searchForm.range"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </div>
          </div>
          <div class="item_btn">
            <el-button type="primary" @click="submitsearch('searchForm')">
              查找
            </el-button>
            <el-button type="primary" @click="resetForm('searchForm')">
              重置
            </el-button>
          </div>
        </div>
        <div class="open_box" @click="sendClick()">
          <div></div>
          <el-button type="primary">发送</el-button>
        </div>
      </el-form>
    </div>
    <div class="myTable">
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 20px"
        ref="tableList"
        v-loading="loading"
      >
        <el-table-column
          align="center"
          prop="createTime"
          :formatter="formatDate"
          label="日期"
        />
        <el-table-column align="center" prop="createTime" label="同步时间" />
        <el-table-column align="center" prop="batchCount" label="任务数量" />
        <el-table-column align="center" prop="" label="完成数量" />
        <el-table-column align="center" prop="" label="备注" />
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="执行状态"
          width="100px"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" size="small">执行中</el-tag>
            <!-- <el-tag v-else size="small" type="warning">已完成</el-tag> -->
            <el-tag v-if="scope.row.status == 2" size="small">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row, $index }">
            <el-button type="primary" size="small" @click="detail(row, $index)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :page-size="10"
          :total="total"
          :current-page="searchForm.page"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogShow"
      center
      :destroy-on-close="true"
    >
      <el-form ref="Form" label-width="300px" :model="formData" :rules="rules">
        <div>任务日期：{{ formData.createTime }}</div>

        <div class="myTable">
          <el-table
            :data="batchData"
            style="width: 100%; margin-top: 20px"
            ref="tableList"
            v-loading="loading"
          >
            <el-table-column align="center" prop="batch" label="批次号" />
            <el-table-column align="center" prop="grade" label="等级" />
            <el-table-column align="center" prop="" label="执行状态" />
            <el-table-column align="center" prop="" label="结果" />
          </el-table>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  findAllTask,
  getTaskPage,
  syncData,
  findBatchByTaskId,
} from "@/api/task";
import { errMsg, succMsg } from "./../../utils/message";
import hasDirective from "/src/directive/permission/btnPermiss.js";
import moment from "moment";

const { exec } = require("child_process");

export default {
  directives: {
    has: hasDirective,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      selectData: [],
      searchForm: {
        page: 1,
        range: [],
      },
      dialogShow: false,
      dialogTitle: "",
      formType: "",
      btnText: "确认",
      formData: {},
      oldFormData: {},
      loading: false,
      batchData: [],
    };
  },
  created() {
    this.loading = true;
    this.getTaskList();
  },
  methods: {
    //日期格式化
    formatDate: function (row, column) {
      var date = row.createTime;
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    getTaskList() {
      let startTime = null;
      let endTime = null;
      if (this.searchForm.range && this.searchForm.range.length > 1) {
        startTime = this.searchForm.range[0];
        endTime = this.searchForm.range[1];
      }
      getTaskPage({
        // ...this.searchForm,
        page: this.searchForm.page,
        startTime: startTime,
        endTime: endTime,
      }).then((res) => {
        this.loading = false;
        if (res.code == "00000") {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    submitsearch(formName) {
      this.searchForm.page = 1;
      this.getTaskList();
    },
    // 多选
    // selectionChangeHandle(val) {
    //   this.dataListSelections = val;
    // },

    // handleCurrentChange(val) {
    //   this.currentRow = val;
    // },

    detail(row, index) {
      this.$router.push({
        path: "resultDetail",
        query: { rowAll: JSON.stringify(row) },
      });
    },
    resetForm(formName) {
      this.searchForm.page = 1;
      this.searchForm.range = [];
      this.getTaskList();
    },
  },
};
</script>
<style scoped>
.container {
  height: 100%;
  padding: 20px;
}

.btsbox {
  margin-top: 40px;
  display: flex;
  justify-content: space-evenly;
}

.checkitem {
  margin-top: 20px;
}

.el-checkbox-group {
  padding-left: 30%;
}

.el-checkbox__inner {
  margin-right: 19px;
}

.search {
  margin-top: 20px;
  padding: 30px 20px 30px 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
}

.myTable {
  margin-top: 30px;
  padding: 1px 20px 30px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.out_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.open_box {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form_box_list {
  width: 80%;
}

.btn_sty {
  width: 60%;
  align-self: center;
  margin: 0 auto;
  padding: 10px 0;
  border-radius: 5px;
  cursor: pointer;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.btn_sty:hover {
  background-color: #e8f4ff;
}

.btn_sty:first-child {
  background-color: #1890ff;
  margin-bottom: 3%;
  border-color: #1890ff;
  color: #fff;
}

.btn_sty:first-child:hover {
  background-color: #46a6ff;
}

.form_box {
  display: flex;
  justify-content: space-between;
}

.inner_form_box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.formItem {
  width: 48%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.itmetitle {
  width: 20%;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  text-align: center;
}

.iteminput {
  width: 80%;
  display: flex;
  justify-content: space-between;
}

.form_box:nth-child(n + 2) {
  margin-top: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.btnbox {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
}

.titles1 {
  width: 120px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
}
.btn {
  background: #fff;
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  z-index: 999;
  margin-left: -20px;
  box-shadow: 0px 0px 5px 0px rgba(217, 216, 216, 0.5);
}
.maxinput {
  width: 80%;
}

.pops {
  width: 148px;
  height: 148px;
  position: relative;
  /* padding: 8px; */
  border: 1px dashed #d9d9d9;
  /* border: 1px solid red; */
}
</style>
